<script setup>
    import { ref } from 'vue'
    import AccountManage from './accountManage.vue'
    import { CloseOutlined } from '@ant-design/icons-vue'

    const props = defineProps({
        visible: {
            type: Boolean,
            default: false
        },

        appKey: {
            type: String,
            default: ''
        }
    })

    const emit = defineEmits(['update:visible', 'logined'])
    const accountManageRef = ref()

    const onAccountLogined = (res) => {
        emit('logined', {
            appKey: props.appKey,
            ...res
        })
    }

    const onCancel = () => {
        emit('update:visible', false)
    }
    const onError = ()=> {
        emit('update:visible', false)
    }
</script>

<template>
    <a-modal
        :visible="visible"
        width="90vw"
        wrapClassName="account-modal"
        :closable="false"
        @cancel="onCancel"
        :footer="null"
        style="height: 90vh; top: 5vh; padding-bottom: 0px;"
        :forceRender="true"
    >
        <div class="w-full h-full">
            <Suspense>
                <AccountManage :app-key="appKey" ref="accountManageRef" @onError="onError" @logined="onAccountLogined">
                    <template #header_after>
                        <CloseOutlined class="cursor-pointer" @click="onCancel"/>
                    </template>
                </AccountManage>
            </Suspense>
        </div>
    </a-modal>
</template>

<style lang="less">
    .account-modal .ant-modal-body {
        padding: 0;
    }

    .account-modal .ant-modal-content {
        height: 100%;

        .ant-modal-body {
            height: 100%;
        }
    }
</style>